<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.61">
    <style>
      :root {
        --c-bg: #fff;
      }
      html.dark {
        --c-bg: #22272e;
      }
      html, body {
        background-color: var(--c-bg);
      }
    </style>
    <script>
      const userMode = localStorage.getItem('vuepress-color-scheme');
			const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
			if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
				document.documentElement.classList.toggle('dark', true);
			}
    </script>
    <script type="text/javascript" src="/lib/tinymce5.10.5/tinymce.min.js"></script><title>嗨，你知道 let 和 const 吗？ | JN Frontend Docs</title><meta name="description" content="江苏金农股份有限公司前端文档站，站内包含内部组件库、微前端框架等文档">
    <link rel="preload" href="/assets/style-7f06fc9f.css" as="style"><link rel="stylesheet" href="/assets/style-7f06fc9f.css">
    <link rel="modulepreload" href="/assets/app-bfaa94ab.js"><link rel="modulepreload" href="/assets/framework-340c2a10.js"><link rel="modulepreload" href="/assets/letconst.html-3f2e0b96.js"><link rel="modulepreload" href="/assets/letconst.html-3b192b16.js"><link rel="prefetch" href="/assets/index.html-c08dba9c.js" as="script"><link rel="prefetch" href="/assets/index.html-db435b79.js" as="script"><link rel="prefetch" href="/assets/熟悉而陌生的模块化.html-9f3227d8.js" as="script"><link rel="prefetch" href="/assets/Address.html-f7647e70.js" as="script"><link rel="prefetch" href="/assets/BaseDrawerContent.html-ab3037a8.js" as="script"><link rel="prefetch" href="/assets/BaseModule.html-1478fa1c.js" as="script"><link rel="prefetch" href="/assets/ButtonGroup.html-fcf3a331.js" as="script"><link rel="prefetch" href="/assets/Collapse.html-7a8cea51.js" as="script"><link rel="prefetch" href="/assets/DebounceButton.html-72c7ad85.js" as="script"><link rel="prefetch" href="/assets/FigureInput.html-df25dc00.js" as="script"><link rel="prefetch" href="/assets/FilePreview.html-4937fb57.js" as="script"><link rel="prefetch" href="/assets/Form.html-5d6b22f4.js" as="script"><link rel="prefetch" href="/assets/HintBox.html-6835dcbd.js" as="script"><link rel="prefetch" href="/assets/Icon.html-607be958.js" as="script"><link rel="prefetch" href="/assets/IconPicker.html-81fcc2d0.js" as="script"><link rel="prefetch" href="/assets/IrregularTable.html-3334208c.js" as="script"><link rel="prefetch" href="/assets/JnEditor.html-f19354db.js" as="script"><link rel="prefetch" href="/assets/LodingShade.html-ce32f5ba.js" as="script"><link rel="prefetch" href="/assets/Modal.html-1a4aba4c.js" as="script"><link rel="prefetch" href="/assets/OperateExcel.html-13779fda.js" as="script"><link rel="prefetch" href="/assets/SelectTree.html-8eb35b5a.js" as="script"><link rel="prefetch" href="/assets/SelectTreeV2.html-0294e83a.js" as="script"><link rel="prefetch" href="/assets/Table.html-e8baa24a.js" as="script"><link rel="prefetch" href="/assets/Tabs.html-f99f83c2.js" as="script"><link rel="prefetch" href="/assets/Tree.html-94f64c00.js" as="script"><link rel="prefetch" href="/assets/UpdateLog.html-96fed179.js" as="script"><link rel="prefetch" href="/assets/Updateguide.html-d24798ff.js" as="script"><link rel="prefetch" href="/assets/Upload.html-5d77d402.js" as="script"><link rel="prefetch" href="/assets/index.html-b65ce016.js" as="script"><link rel="prefetch" href="/assets/index.html-fe9f70c5.js" as="script"><link rel="prefetch" href="/assets/moenorepo.html-6096f1b5.js" as="script"><link rel="prefetch" href="/assets/subPro.html-36f639d2.js" as="script"><link rel="prefetch" href="/assets/FAQ.html-4ecdac2c.js" as="script"><link rel="prefetch" href="/assets/commitMsg.html-307d426c.js" as="script"><link rel="prefetch" href="/assets/construction.html-99aa1b4d.js" as="script"><link rel="prefetch" href="/assets/environmentVar.html-49d04c3a.js" as="script"><link rel="prefetch" href="/assets/homeDev.html-6a2fb1a0.js" as="script"><link rel="prefetch" href="/assets/index.html-0b6e8117.js" as="script"><link rel="prefetch" href="/assets/microRegList.html-b62877d4.js" as="script"><link rel="prefetch" href="/assets/plan.html-277e3cea.js" as="script"><link rel="prefetch" href="/assets/practice.html-c4d36b33.js" as="script"><link rel="prefetch" href="/assets/production.html-dc42f69e.js" as="script"><link rel="prefetch" href="/assets/quickStart-monorepo.html-7b3b7f8d.js" as="script"><link rel="prefetch" href="/assets/quickStart.html-b6e33c48.js" as="script"><link rel="prefetch" href="/assets/quickStart2.html-b10000c3.js" as="script"><link rel="prefetch" href="/assets/scheme.html-d542f716.js" as="script"><link rel="prefetch" href="/assets/storeMage.html-815c6185.js" as="script"><link rel="prefetch" href="/assets/theme.html-465ca127.js" as="script"><link rel="prefetch" href="/assets/v1ToV2.html-9a2bc18d.js" as="script"><link rel="prefetch" href="/assets/workflow.html-6e534c27.js" as="script"><link rel="prefetch" href="/assets/index.html-81fa1c2b.js" as="script"><link rel="prefetch" href="/assets/painSpot.html-77e2c96b.js" as="script"><link rel="prefetch" href="/assets/resolve.html-2a8f8dad.js" as="script"><link rel="prefetch" href="/assets/index.html-bdc10a52.js" as="script"><link rel="prefetch" href="/assets/bom.html-ced4003b.js" as="script"><link rel="prefetch" href="/assets/dom.html-3d9c1f79.js" as="script"><link rel="prefetch" href="/assets/download.html-fc87bd6a.js" as="script"><link rel="prefetch" href="/assets/index.html-193d1a36.js" as="script"><link rel="prefetch" href="/assets/install.html-c6c6b180.js" as="script"><link rel="prefetch" href="/assets/number.html-9929ee21.js" as="script"><link rel="prefetch" href="/assets/object.html-62e9bd7c.js" as="script"><link rel="prefetch" href="/assets/storage.html-438a0e0f.js" as="script"><link rel="prefetch" href="/assets/string.html-66b8ad68.js" as="script"><link rel="prefetch" href="/assets/tree.html-6b8c9496.js" as="script"><link rel="prefetch" href="/assets/FormGenerate.html-493fc23c.js" as="script"><link rel="prefetch" href="/assets/Bar.html-ba9fe5e8.js" as="script"><link rel="prefetch" href="/assets/Basic.html-e8fb918f.js" as="script"><link rel="prefetch" href="/assets/Line.html-4604e09a.js" as="script"><link rel="prefetch" href="/assets/Pie.html-c30a8814.js" as="script"><link rel="prefetch" href="/assets/InfoAutocomplete.html-00b41d3e.js" as="script"><link rel="prefetch" href="/assets/InfoSelect.html-671c17bd.js" as="script"><link rel="prefetch" href="/assets/InfoSelectAll.html-9008c8b4.js" as="script"><link rel="prefetch" href="/assets/assets.html-260242e8.js" as="script"><link rel="prefetch" href="/assets/componentConcept.html-6e4317dc.js" as="script"><link rel="prefetch" href="/assets/componentPractical.html-9086711f.js" as="script"><link rel="prefetch" href="/assets/directives.html-d0ae2312.js" as="script"><link rel="prefetch" href="/assets/indexes.html-e77392a8.js" as="script"><link rel="prefetch" href="/assets/pageContentAuths.html-4d589490.js" as="script"><link rel="prefetch" href="/assets/pages.html-c55a8bc5.js" as="script"><link rel="prefetch" href="/assets/requestApi.html-88bb2797.js" as="script"><link rel="prefetch" href="/assets/requestConcept.html-adda0d11.js" as="script"><link rel="prefetch" href="/assets/requestPractical.html-faecae2b.js" as="script"><link rel="prefetch" href="/assets/requestProxy.html-3200aa1f.js" as="script"><link rel="prefetch" href="/assets/routerConcept.html-6accad32.js" as="script"><link rel="prefetch" href="/assets/routerPractical.html-512c6707.js" as="script"><link rel="prefetch" href="/assets/storeConcept.html-e22e9ac7.js" as="script"><link rel="prefetch" href="/assets/storePractical.html-247d8533.js" as="script"><link rel="prefetch" href="/assets/typesConcept.html-e1076ad0.js" as="script"><link rel="prefetch" href="/assets/typesPractical.html-a063ac6b.js" as="script"><link rel="prefetch" href="/assets/basic-old.html-e813c095.js" as="script"><link rel="prefetch" href="/assets/basic.html-96becbed.js" as="script"><link rel="prefetch" href="/assets/dependence.html-43d38fc7.js" as="script"><link rel="prefetch" href="/assets/micro-od.html-9dfcee74.js" as="script"><link rel="prefetch" href="/assets/micro.html-c39098c6.js" as="script"><link rel="prefetch" href="/assets/404.html-f9875e7b.js" as="script"><link rel="prefetch" href="/assets/index.html-48aa5787.js" as="script"><link rel="prefetch" href="/assets/index.html-d608a849.js" as="script"><link rel="prefetch" href="/assets/熟悉而陌生的模块化.html-4ff45b9c.js" as="script"><link rel="prefetch" href="/assets/Address.html-42ef6369.js" as="script"><link rel="prefetch" href="/assets/BaseDrawerContent.html-ca2f5dbf.js" as="script"><link rel="prefetch" href="/assets/BaseModule.html-bcac5fb3.js" as="script"><link rel="prefetch" href="/assets/ButtonGroup.html-45240bc0.js" as="script"><link rel="prefetch" href="/assets/Collapse.html-2820a639.js" as="script"><link rel="prefetch" href="/assets/DebounceButton.html-a6375e54.js" as="script"><link rel="prefetch" href="/assets/FigureInput.html-6a9e4a73.js" as="script"><link rel="prefetch" href="/assets/FilePreview.html-f7c5e9fe.js" as="script"><link rel="prefetch" href="/assets/Form.html-3068bdf0.js" as="script"><link rel="prefetch" href="/assets/HintBox.html-bbf1cd9e.js" as="script"><link rel="prefetch" href="/assets/Icon.html-d95e3688.js" as="script"><link rel="prefetch" href="/assets/IconPicker.html-81a7e524.js" as="script"><link rel="prefetch" href="/assets/IrregularTable.html-a890399c.js" as="script"><link rel="prefetch" href="/assets/JnEditor.html-bf85cd36.js" as="script"><link rel="prefetch" href="/assets/LodingShade.html-c0d28ff3.js" as="script"><link rel="prefetch" href="/assets/Modal.html-794dcc40.js" as="script"><link rel="prefetch" href="/assets/OperateExcel.html-b0ba91a0.js" as="script"><link rel="prefetch" href="/assets/SelectTree.html-595c0e38.js" as="script"><link rel="prefetch" href="/assets/SelectTreeV2.html-34bccf21.js" as="script"><link rel="prefetch" href="/assets/Table.html-d73c36b9.js" as="script"><link rel="prefetch" href="/assets/Tabs.html-84faed0a.js" as="script"><link rel="prefetch" href="/assets/Tree.html-3667a114.js" as="script"><link rel="prefetch" href="/assets/UpdateLog.html-4a1f3631.js" as="script"><link rel="prefetch" href="/assets/Updateguide.html-02371534.js" as="script"><link rel="prefetch" href="/assets/Upload.html-10ba1ca0.js" as="script"><link rel="prefetch" href="/assets/index.html-c47a30df.js" as="script"><link rel="prefetch" href="/assets/index.html-320567a6.js" as="script"><link rel="prefetch" href="/assets/moenorepo.html-576011bb.js" as="script"><link rel="prefetch" href="/assets/subPro.html-75b57a23.js" as="script"><link rel="prefetch" href="/assets/FAQ.html-f1fca6c0.js" as="script"><link rel="prefetch" href="/assets/commitMsg.html-6acdc46a.js" as="script"><link rel="prefetch" href="/assets/construction.html-46da6ea7.js" as="script"><link rel="prefetch" href="/assets/environmentVar.html-cc5e18a8.js" as="script"><link rel="prefetch" href="/assets/homeDev.html-45d74a50.js" as="script"><link rel="prefetch" href="/assets/index.html-957a05f9.js" as="script"><link rel="prefetch" href="/assets/microRegList.html-58159017.js" as="script"><link rel="prefetch" href="/assets/plan.html-f544d172.js" as="script"><link rel="prefetch" href="/assets/practice.html-9190a049.js" as="script"><link rel="prefetch" href="/assets/production.html-efcd58ad.js" as="script"><link rel="prefetch" href="/assets/quickStart-monorepo.html-fa679827.js" as="script"><link rel="prefetch" href="/assets/quickStart.html-b2b2cf91.js" as="script"><link rel="prefetch" href="/assets/quickStart2.html-f4e9daf8.js" as="script"><link rel="prefetch" href="/assets/scheme.html-554f0667.js" as="script"><link rel="prefetch" href="/assets/storeMage.html-6e8d9e82.js" as="script"><link rel="prefetch" href="/assets/theme.html-769f6eb6.js" as="script"><link rel="prefetch" href="/assets/v1ToV2.html-3ae59d40.js" as="script"><link rel="prefetch" href="/assets/workflow.html-9f9833c6.js" as="script"><link rel="prefetch" href="/assets/index.html-3970f3cb.js" as="script"><link rel="prefetch" href="/assets/painSpot.html-24db33c6.js" as="script"><link rel="prefetch" href="/assets/resolve.html-84653b13.js" as="script"><link rel="prefetch" href="/assets/index.html-b7232fce.js" as="script"><link rel="prefetch" href="/assets/bom.html-ea3a3186.js" as="script"><link rel="prefetch" href="/assets/dom.html-9edcb1e4.js" as="script"><link rel="prefetch" href="/assets/download.html-4dd3d345.js" as="script"><link rel="prefetch" href="/assets/index.html-b478f1d0.js" as="script"><link rel="prefetch" href="/assets/install.html-3a798661.js" as="script"><link rel="prefetch" href="/assets/number.html-f73b01de.js" as="script"><link rel="prefetch" href="/assets/object.html-3bffe94b.js" as="script"><link rel="prefetch" href="/assets/storage.html-02163cce.js" as="script"><link rel="prefetch" href="/assets/string.html-2368bc12.js" as="script"><link rel="prefetch" href="/assets/tree.html-795d0257.js" as="script"><link rel="prefetch" href="/assets/FormGenerate.html-112e9811.js" as="script"><link rel="prefetch" href="/assets/Bar.html-b734d02b.js" as="script"><link rel="prefetch" href="/assets/Basic.html-8aa29fd5.js" as="script"><link rel="prefetch" href="/assets/Line.html-0006a111.js" as="script"><link rel="prefetch" href="/assets/Pie.html-e5d8de5a.js" as="script"><link rel="prefetch" href="/assets/InfoAutocomplete.html-335586cf.js" as="script"><link rel="prefetch" href="/assets/InfoSelect.html-19b6bfa4.js" as="script"><link rel="prefetch" href="/assets/InfoSelectAll.html-ba486e6d.js" as="script"><link rel="prefetch" href="/assets/assets.html-c2237689.js" as="script"><link rel="prefetch" href="/assets/componentConcept.html-d44f97dc.js" as="script"><link rel="prefetch" href="/assets/componentPractical.html-4c106614.js" as="script"><link rel="prefetch" href="/assets/directives.html-1374cfb4.js" as="script"><link rel="prefetch" href="/assets/indexes.html-e9face96.js" as="script"><link rel="prefetch" href="/assets/pageContentAuths.html-7e4a0e5b.js" as="script"><link rel="prefetch" href="/assets/pages.html-5c59cfc9.js" as="script"><link rel="prefetch" href="/assets/requestApi.html-815bdaf3.js" as="script"><link rel="prefetch" href="/assets/requestConcept.html-19ae22e9.js" as="script"><link rel="prefetch" href="/assets/requestPractical.html-2adeb105.js" as="script"><link rel="prefetch" href="/assets/requestProxy.html-fbb23d6e.js" as="script"><link rel="prefetch" href="/assets/routerConcept.html-d2000500.js" as="script"><link rel="prefetch" href="/assets/routerPractical.html-67a23ee0.js" as="script"><link rel="prefetch" href="/assets/storeConcept.html-3efb81b4.js" as="script"><link rel="prefetch" href="/assets/storePractical.html-72548894.js" as="script"><link rel="prefetch" href="/assets/typesConcept.html-83bcd54c.js" as="script"><link rel="prefetch" href="/assets/typesPractical.html-a8643161.js" as="script"><link rel="prefetch" href="/assets/basic-old.html-5fa6f14d.js" as="script"><link rel="prefetch" href="/assets/basic.html-82c1a5e3.js" as="script"><link rel="prefetch" href="/assets/dependence.html-f50c9128.js" as="script"><link rel="prefetch" href="/assets/micro-od.html-67e0eb46.js" as="script"><link rel="prefetch" href="/assets/micro.html-882e2183.js" as="script"><link rel="prefetch" href="/assets/404.html-1cace4e3.js" as="script"><link rel="prefetch" href="/assets/demoBlock-547ba88b.js" as="script"><link rel="prefetch" href="/assets/update-log-block-723bb72d.js" as="script"><link rel="prefetch" href="/assets/demo1-12d68d90.js" as="script"><link rel="prefetch" href="/assets/demo2-9eb3d5e3.js" as="script"><link rel="prefetch" href="/assets/demo3-cad48c33.js" as="script"><link rel="prefetch" href="/assets/demo4-00837823.js" as="script"><link rel="prefetch" href="/assets/hideDetail-73eabcb6.js" as="script"><link rel="prefetch" href="/assets/demo1-d30bc42d.js" as="script"><link rel="prefetch" href="/assets/card-49344c01.js" as="script"><link rel="prefetch" href="/assets/cardButton-2ab573df.js" as="script"><link rel="prefetch" href="/assets/custom-2e1d5ce9.js" as="script"><link rel="prefetch" href="/assets/formAndTable-a9e89390.js" as="script"><link rel="prefetch" href="/assets/formFast-68efe74c.js" as="script"><link rel="prefetch" href="/assets/custom-8ee84dfd.js" as="script"><link rel="prefetch" href="/assets/demo1-3e00eea3.js" as="script"><link rel="prefetch" href="/assets/demo1-13d09bea.js" as="script"><link rel="prefetch" href="/assets/coreCustom-44473ea3.js" as="script"><link rel="prefetch" href="/assets/demo1-ffb79487.js" as="script"><link rel="prefetch" href="/assets/moreSearchPopup-e8539b49.js" as="script"><link rel="prefetch" href="/assets/moreSearchPopupTabular-0b018d46.js" as="script"><link rel="prefetch" href="/assets/moreSearchPullDown-a130f024.js" as="script"><link rel="prefetch" href="/assets/moreSearchPullDownTabular-76657876.js" as="script"><link rel="prefetch" href="/assets/selecttion-c7803256.js" as="script"><link rel="prefetch" href="/assets/tabs-d56f6b99.js" as="script"><link rel="prefetch" href="/assets/demo1-0816d60f.js" as="script"><link rel="prefetch" href="/assets/demo2-9ecc5665.js" as="script"><link rel="prefetch" href="/assets/bootstrapLayout-1ea184c9.js" as="script"><link rel="prefetch" href="/assets/controlGroup-e8c42887.js" as="script"><link rel="prefetch" href="/assets/customLabel-4a16a282.js" as="script"><link rel="prefetch" href="/assets/demo1-c21fdd62.js" as="script"><link rel="prefetch" href="/assets/demo2-41d266a2.js" as="script"><link rel="prefetch" href="/assets/demo3-269fd0f6.js" as="script"><link rel="prefetch" href="/assets/demo4-00f66ba2.js" as="script"><link rel="prefetch" href="/assets/demo5-dda7cc5a.js" as="script"><link rel="prefetch" href="/assets/showToolTip-d3b9b379.js" as="script"><link rel="prefetch" href="/assets/uploadDemo-c32953ff.js" as="script"><link rel="prefetch" href="/assets/demo1-b5788180.js" as="script"><link rel="prefetch" href="/assets/demo2-c260ab31.js" as="script"><link rel="prefetch" href="/assets/demo3-6cdf8519.js" as="script"><link rel="prefetch" href="/assets/customColor-3d9de184.js" as="script"><link rel="prefetch" href="/assets/demo0-d1d86d70.js" as="script"><link rel="prefetch" href="/assets/demo1-768aae0e.js" as="script"><link rel="prefetch" href="/assets/demo2-09509e5d.js" as="script"><link rel="prefetch" href="/assets/demo3-7b5c78e1.js" as="script"><link rel="prefetch" href="/assets/demo1-1fef897c.js" as="script"><link rel="prefetch" href="/assets/demo2-9eb823cc.js" as="script"><link rel="prefetch" href="/assets/design-d18997c2.js" as="script"><link rel="prefetch" href="/assets/drawingBoard-b0338214.js" as="script"><link rel="prefetch" href="/assets/bindEvents-dffae645.js" as="script"><link rel="prefetch" href="/assets/classic-0a187567.js" as="script"><link rel="prefetch" href="/assets/contentStorage-975c1b84.js" as="script"><link rel="prefetch" href="/assets/distraction-80ebb968.js" as="script"><link rel="prefetch" href="/assets/form-eaa75a02.js" as="script"><link rel="prefetch" href="/assets/getInstance-23efae27.js" as="script"><link rel="prefetch" href="/assets/inline-6be92b15.js" as="script"><link rel="prefetch" href="/assets/serverUpload-df40118c.js" as="script"><link rel="prefetch" href="/assets/demo1-b740e314.js" as="script"><link rel="prefetch" href="/assets/demo1-68bb6031.js" as="script"><link rel="prefetch" href="/assets/demo2-df4d048d.js" as="script"><link rel="prefetch" href="/assets/demo3-28e0085f.js" as="script"><link rel="prefetch" href="/assets/verticalCenter-129ef695.js" as="script"><link rel="prefetch" href="/assets/demo1-98350cb8.js" as="script"><link rel="prefetch" href="/assets/demo2-7f6ee778.js" as="script"><link rel="prefetch" href="/assets/demo1-f7056bc7.js" as="script"><link rel="prefetch" href="/assets/demo2-a0ba8b6f.js" as="script"><link rel="prefetch" href="/assets/demo1-1c313755.js" as="script"><link rel="prefetch" href="/assets/demo2-c2582bd1.js" as="script"><link rel="prefetch" href="/assets/demo3-a4610510.js" as="script"><link rel="prefetch" href="/assets/demo1-18fbac0d.js" as="script"><link rel="prefetch" href="/assets/demo2-9cab9d84.js" as="script"><link rel="prefetch" href="/assets/demo3-0bbd970b.js" as="script"><link rel="prefetch" href="/assets/demo4-51797bfb.js" as="script"><link rel="prefetch" href="/assets/demo5-43641915.js" as="script"><link rel="prefetch" href="/assets/demo6-b040d95c.js" as="script"><link rel="prefetch" href="/assets/demo7-ce249bbd.js" as="script"><link rel="prefetch" href="/assets/demo8-edf67670.js" as="script"><link rel="prefetch" href="/assets/hideColumnDemo-69627cb7.js" as="script"><link rel="prefetch" href="/assets/oprationColumnConfiger-c237144b.js" as="script"><link rel="prefetch" href="/assets/validate-fbf1b277.js" as="script"><link rel="prefetch" href="/assets/demo1-d9847e60.js" as="script"><link rel="prefetch" href="/assets/demo2-11587063.js" as="script"><link rel="prefetch" href="/assets/demo1-291c9baa.js" as="script"><link rel="prefetch" href="/assets/demo2-52e0c845.js" as="script"><link rel="prefetch" href="/assets/demo3-568b7e8b.js" as="script"><link rel="prefetch" href="/assets/demo4-927e1acc.js" as="script"><link rel="prefetch" href="/assets/avatar-15cf2607.js" as="script"><link rel="prefetch" href="/assets/disabled-433e98ce.js" as="script"><link rel="prefetch" href="/assets/picture-card-c1a8bb4b.js" as="script"><link rel="prefetch" href="/assets/picture-ef3755b5.js" as="script"><link rel="prefetch" href="/assets/preview-f61e7e14.js" as="script"><link rel="prefetch" href="/assets/text-09ef0872.js" as="script"><link rel="prefetch" href="/assets/demo1-a3645ecb.js" as="script"><link rel="prefetch" href="/assets/demo2-d734f7c1.js" as="script"><link rel="prefetch" href="/assets/demo3-0dfdb25a.js" as="script"><link rel="prefetch" href="/assets/demo4-2fb2cce1.js" as="script"><link rel="prefetch" href="/assets/demo5-b421d6bb.js" as="script"><link rel="prefetch" href="/assets/demo6-16ebc159.js" as="script"><link rel="prefetch" href="/assets/demo1-490f80f0.js" as="script"><link rel="prefetch" href="/assets/demo2-e79b66d1.js" as="script"><link rel="prefetch" href="/assets/demo3-f504fcea.js" as="script"><link rel="prefetch" href="/assets/demo4-edeaa9ad.js" as="script"><link rel="prefetch" href="/assets/demo5-f8626895.js" as="script"><link rel="prefetch" href="/assets/demo1-8a123b0e.js" as="script"><link rel="prefetch" href="/assets/demo2-69d4255d.js" as="script"><link rel="prefetch" href="/assets/demo3-2afab6da.js" as="script"><link rel="prefetch" href="/assets/advance-a564dd5c.js" as="script"><link rel="prefetch" href="/assets/demo1-15b4a1ee.js" as="script"><link rel="prefetch" href="/assets/demo2-b3c9e3c3.js" as="script"><link rel="prefetch" href="/assets/demo3-376435ef.js" as="script"><link rel="prefetch" href="/assets/demo4-a8f3de98.js" as="script"><link rel="prefetch" href="/assets/demo5-064b8bb9.js" as="script"><link rel="prefetch" href="/assets/formInside-98b98293.js" as="script"><link rel="prefetch" href="/assets/index-4853382f.js" as="script"><link rel="prefetch" href="/assets/tableInside-481256b6.js" as="script"><link rel="prefetch" href="/assets/closeInit-cb2ef70b.js" as="script"><link rel="prefetch" href="/assets/formInside-4ba7da68.js" as="script"><link rel="prefetch" href="/assets/index-7816f63c.js" as="script"><link rel="prefetch" href="/assets/tableInside-57de18ec.js" as="script"><link rel="prefetch" href="/assets/formInside-e196b3cb.js" as="script"><link rel="prefetch" href="/assets/hideHeader-7f741a3f.js" as="script"><link rel="prefetch" href="/assets/index-06f007ac.js" as="script"><link rel="prefetch" href="/assets/tableInside-8789cc27.js" as="script"><link rel="prefetch" href="/assets/index-43c3d78a.js" as="script">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container no-sidebar"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/favicon.ico" alt="JN Frontend Docs"><span class="site-name can-hide">JN Frontend Docs</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/components/" class="" aria-label="组件库"><!--[--><!--]--> 组件库 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/micro/" class="" aria-label="微前端"><!--[--><!--]--> 微前端 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/micro-cli/" class="" aria-label="micro-cli"><!--[--><!--]--> micro-cli <!--[--><!--]--></a></div><div class="navbar-item"><a href="/utilsDocs/" class="" aria-label="utils"><!--[--><!--]--> utils <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="更新日志"><span class="title">更新日志</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="更新日志"><span class="title">更新日志</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a href="/components/UpdateLog.md" class="" aria-label="组件库@3.0.0"><!--[--><!--]--> 组件库@3.0.0 <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/micro/updateLog/basic.md" class="" aria-label="统一管理平台@2.4.0"><!--[--><!--]--> 统一管理平台@2.4.0 <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/micro/updateLog/dependence.md" class="" aria-label="微应用依赖"><!--[--><!--]--> 微应用依赖 <!--[--><!--]--></a></li><!--]--></ul></div></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/components/" class="" aria-label="组件库"><!--[--><!--]--> 组件库 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/micro/" class="" aria-label="微前端"><!--[--><!--]--> 微前端 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/micro-cli/" class="" aria-label="micro-cli"><!--[--><!--]--> micro-cli <!--[--><!--]--></a></div><div class="navbar-item"><a href="/utilsDocs/" class="" aria-label="utils"><!--[--><!--]--> utils <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="更新日志"><span class="title">更新日志</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="更新日志"><span class="title">更新日志</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a href="/components/UpdateLog.md" class="" aria-label="组件库@3.0.0"><!--[--><!--]--> 组件库@3.0.0 <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/micro/updateLog/basic.md" class="" aria-label="统一管理平台@2.4.0"><!--[--><!--]--> 统一管理平台@2.4.0 <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/micro/updateLog/dependence.md" class="" aria-label="微应用依赖"><!--[--><!--]--> 微应用依赖 <!--[--><!--]--></a></li><!--]--></ul></div></div><!--]--></nav><!--[--><!--]--><!----><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="嗨-你知道-let-和-const-吗" tabindex="-1"><a class="header-anchor" href="#嗨-你知道-let-和-const-吗" aria-hidden="true">#</a> 嗨，你知道 let 和 const 吗？</h1><h2 id="前言" tabindex="-1"><a class="header-anchor" href="#前言" aria-hidden="true">#</a> 前言</h2><p>如果有人问你：知道 let 和 const 吗 答案是肯定的，还能回答的头头是道：</p><ul><li>let 和 const 不就是 es6 新增的声明变量的关键字嘛</li><li>let 是用来声明变量的，const 是用来声明常量的</li><li>与 var 不同，let、const 不存在变量提升</li><li>暂时性死区</li><li>不绑定顶级对象</li></ul><p>再问：</p><ul><li>let 和 const 真的不存在变量提升吗？ 为什么不存在</li><li>暂时性死区又是如何形成的？</li><li>let、const 声明的全局变量不在 全局对象中，那它存在于哪里呢？</li></ul><h2 id="_1-var-的变量提升规则" tabindex="-1"><a class="header-anchor" href="#_1-var-的变量提升规则" aria-hidden="true">#</a> 1. var 的变量提升规则</h2><p>复习变量提升的概念，其中涉及到 JS 的 <strong>执行上下文、变量对象</strong> 等知识。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token string">&quot;global&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">bar</span><span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>temp<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// undefined</span>
    <span class="token keyword">var</span> temp <span class="token operator">=</span> <span class="token string">&quot;local&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">bar</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>我们都知道在 js 中，代码执行时会把当前作用域中的所有的使用 var 声明的变量以及 function 声明的函数提升到作用域的顶部(变量提升声明，不提升赋值；函数提升函数体，不提升调用)。所以我们在 var 声明变量之前可以访问 temp，结果是 <strong>undefined</strong></p><p>让我们从 js 代码的运行角度去看这个过程，如下：</p><div class="custom-container tip"><p class="custom-container-title">执行流程</p><ol><li>执行流进入全局执行环境</li><li>创建全局执行环境的变量对象, 并将变量 a 的声明、函数 bar 的声明添加到变量对象中</li><li>进入全局代码执行阶段</li><li>对变量 a 赋值为 &#39;global&#39;</li><li>遇到 函数 bar 的调用</li><li>进入函数 bar 内部，创建 bar 的执行环境，压入执行环境栈</li><li>同样的，创建函数 bar 执行环境的活动对象，将变量 temp 在 活动对象内创建，key 为 temp，初始化值为 undefined</li><li>进入代码执行阶段，遇到 打印输出 a，此时 a 存在于活动对象中，值为 undefined</li><li>继续执行，为 temp 赋值为 &#39;local&#39;</li><li>bar 函数内代码执行完毕，执行环境栈谈出 bar 执行环境，执行流回到 global 执行环境中继续执行...</li></ol></div><div class="custom-container tip"><p class="custom-container-title">简而言之</p><p>js 在代码预编译阶段，会创建一个变量对象，变量对象中有一个属性，属性名称为 temp，属性值为 undefined，所以在变量声明之前打印 temp，值为 undefined；这也就是 var 的变量提升规则</p></div><h2 id="_2-let-的提升规则" tabindex="-1"><a class="header-anchor" href="#_2-let-的提升规则" aria-hidden="true">#</a> 2. let 的提升规则</h2><h3 id="死缓区-暂存死区-tdz-temporal-dead-zone" tabindex="-1"><a class="header-anchor" href="#死缓区-暂存死区-tdz-temporal-dead-zone" aria-hidden="true">#</a> 死缓区？ 暂存死区？ TDZ (Temporal dead zone)？</h3><p>如果你能理解 var 的提升规则，那么理解 let 的提升将会变得很轻松。 在 MDN 关于 let 的文档中，有这么一句话：</p><blockquote><p><strong>The other difference between var and let is that the latter is initialized to value only when parser evaluates it (see below).</strong></p></blockquote><p>ps: 我的英语极差，MDN 的翻译是这样的：</p><blockquote><p>var 和 let 的不同之处在于后者是在编译时才初始化（见下面）</p></blockquote><p>我使用 有道翻译 是酱紫的：</p><blockquote><p>var 和 let 之间的另一个区别是，后者只有在解析器对其求值时才初始化为 value(参见下面的内容)。</p></blockquote><p>我预感到 MDN 的中文翻译并不准确(因为 var 是在编译时初始化的，可见翻译有问题)，再结合 有道的硬核翻译，我将其理解为：</p><blockquote><p><strong>var 和 let 的不同之处在于后者是在运行时才初始化的</strong></p></blockquote><p>在 MDN 上点击 <code>(见下面)</code> 看到了 暂存死区的概念：</p><div class="custom-container tip"><p class="custom-container-title">暂存死区</p><p>与通过 var 声明的有初始化值 undefined 的变量不同，通过 let 声明的变量直到它们的定义被执行时才初始化。</p><p>在变量初始化前访问该变量会导致 ReferenceError。该变量处在一个自块顶部到初始化处理的“暂存死区”中。</p></div><h3 id="结合例子" tabindex="-1"><a class="header-anchor" href="#结合例子" aria-hidden="true">#</a> 结合例子：</h3><h4 id="例-1" tabindex="-1"><a class="header-anchor" href="#例-1" aria-hidden="true">#</a> 例 1.</h4><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Uncaught ReferenceError: Cannot access &#39;a&#39; before initialization</span>
    <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">123</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>典型的 let 声明变量的例子：<br> 与 var 不同的是，我们无法在 let 声明之前获取该变量；<br> 否则，报错：Cannot access &#39;a&#39; before initialization；<br> 报错信息给到我们，硬核翻译为：无法在初始化之前访问&#39;a&#39;；<br> 从 “无法在初始化之前访问&#39;a&#39;” 是否能够看出写端倪呢？</p><h4 id="例-2" tabindex="-1"><a class="header-anchor" href="#例-2" aria-hidden="true">#</a> 例 2.</h4><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b<span class="token punctuation">;</span>
<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Uncaught ReferenceError: Cannot access &#39;a&#39; before initialization</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">(</span>b <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>结果为：报错 - Uncaught ReferenceError: Cannot access &#39;a&#39; before initialization；</p><p>与 例 1 报的同样的错误；</p><p>我们试想下：</p><p>在匿名函数内，第一个访问的 a，为什么不能获取到外部环境的 a = 3；而是在这里就早早的报错了呢？</p><p>估计很多人就会说：这不就是因为 let 的<strong>暂时性死区</strong>特性嘛；</p><p>在 阮大神的 《es6 入门》 中，对于暂时性死区这样写到：</p><blockquote><p>只要块级作用域内存在 let 命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。</p></blockquote><p>以及后面的介绍，在我看来只是声明式的告诉了我：在作用域内，无论代码先后顺序，只要在代码中出现了 let a，那么 a 变量就 <strong>“绑定”</strong> 了这个作用域，有没有疑问？ 为什么我声明变量的代码明明还在下面，上面的代码就被绑定了呢，js 不是顺序执行的吗？</p><p>OK，走到了现在，结合 var 的提升规则，是不是可以将 let 理解为：</p><div class="custom-container tip"><p class="custom-container-title">TIP</p><ul><li>使用 let 声明的变量实际上也存在提升，但是与 var 的提升规则不同：</li><li>var 声明的变量是在代码预编译阶段 被创建在了 执行环境的变量对象中，并且将其初始化，初始化值为 undefined；</li><li>而 let 声明的变量，在执行环境<strong>预编译阶段</strong>，被提升到了一个叫做 <strong>“暂存死区”</strong> 的地方，并且没有对其进行<strong>初始化</strong>；</li><li>所以，无论使用 let 声明的变量，声明在代码的任何位置，这个变量一开始就被 <strong>“绑定”</strong> 在了当前执行环境中；</li><li>在进入执行阶段时，只有在 let 声明被执行后，才对这个变量进行了初始化；</li><li>所以，在执行到 let 声明之前，是无法访问这个被 <strong>“绑定”</strong> 的变量的。</li></ul></div><p><strong>进一步验证</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b<span class="token punctuation">;</span>
<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> a<span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// undefined</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// undefined</span>
    b <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>
    a <span class="token operator">=</span> b<span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 3</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 3</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 3</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 3</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>代码顺利执行 <br> 我们将变量 a 的声明提升到了函数的顶部，在进入函数执行阶段，第一句执行的就是 let a; 声明了 a 变量，并将其值初始化为 undefined <br> 所以在下面打印 a 为 undefined <br> 后续代码就不说了...</p><h3 id="小结" tabindex="-1"><a class="header-anchor" href="#小结" aria-hidden="true">#</a> 小结</h3><div class="custom-container tip"><p class="custom-container-title">TIP</p><ol><li>其实 let 和 const 也是存在变量提升的，只不过和 var 的提升规则不同，let 是将变量提升到了一个叫做 <strong>“暂存死区”</strong> 的地方，在提升时并没有对其进行初始化，如果去访问 <strong>“暂存死区”</strong> 中的变量，就会报错；</li><li>由于 let 的变量提升是在 “预编译” 阶段完成的，所以在进入执行环境后，无论声明代码在何处，这个被声明的变量就被绑定了，在声明之前访问这个变量，就会报错，也就会形成 代码的 <strong>“暂时性死区”</strong></li><li>在执行环境的执行阶段，在当执行到 let 声明时，那个变量才会 从 <strong>“暂存死区”</strong> 中移除，并对齐初始化为 undefined，所以 使用 let 声明的变量只能在其声明后访问。</li><li>其实在我的理解中，<strong>“暂存死区”</strong> 和 <strong>“暂时性死区”</strong> 并不是一个概念，<strong>“暂存死区”</strong> 亦可称为 <strong>“死缓区”</strong> (死亡缓存区域？ 随便怎么叫了)，<strong>“暂存死区”</strong> 是一个保存 let 声明的变量的地方，正是因为有这个区域的存在，才使得 let 声明的变量能够保证不能再声明前访问变量，继而也就形成了 <strong>“暂时性死区”</strong></li></ol></div><h2 id="_3-全局环境下的-let" tabindex="-1"><a class="header-anchor" href="#_3-全局环境下的-let" aria-hidden="true">#</a> 3. 全局环境下的 let</h2><p>在 《es6 入门》 中如是写到：</p><div class="custom-container tip"><p class="custom-container-title">TIP</p><p>顶层对象，在浏览器环境指的是 window 对象，在 Node 指的是 global 对象。ES5 之中，顶层对象的属性与全局变量是等价的。</p><p>let 命令、const 命令、class 命令声明的全局变量，不属于顶层对象的属性。</p></div><p>在 es5 时期，全局声明的变量是被挂载在顶级对象下的，在 es6 时期，使用 let 声明的全局变量，并不存在于顶级对象下</p><p>那么问题来了，使用 let 声明的变量存在于哪里呢？</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// undefined</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>下列涉及到作用域、作用域链生成规则等知识, 如果不理解作用链的生成规则可能会对下面产生疑惑。</p></blockquote><p>友情链接：<a href="https://juejin.im/post/6844903975544848397" target="_blank" rel="noopener noreferrer">了解作用域<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> | <a href="https://juejin.im/post/6844903975548878856" target="_blank" rel="noopener noreferrer">深入作用域链<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;global Str&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">bar</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;local Str&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

console<span class="token punctuation">.</span><span class="token function">dir</span><span class="token punctuation">(</span>bar<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>输出结果：</p><p><img src="/assets/作用域链-e3bdc77c.png" alt="作用域链"></p><p>上图中的 圈红部分是函数的作用域链(在 谷歌浏览器可以看到如上的打印输出，在 火狐 ie 下均没有)</p><p>可以看到，在作用域链中存在两项：</p><ul><li><strong><code>[[Scopes]][0]: Script</code></strong> 和顶级对象平行的一个作用域，可以看到里面貌似有熟悉的东西</li><li><strong><code>[[Scopes]][1]: Global</code></strong> 也就是顶级作用域的变量对象，在浏览器中就是 window</li></ul><h3 id="小结-1" tabindex="-1"><a class="header-anchor" href="#小结-1" aria-hidden="true">#</a> 小结</h3><ul><li><p>let 定义的全局变量并不存在于 顶级对象中，而是存在于和顶级对象平行的一个全局作用域中</p></li><li><p>亦或者可以说 let 和 const 定义的变量是存在于作用链的顶端的，根据作用域链的访问规则，可以访问到全局变量</p></li><li><p>至于这个 作用域链顶端的 Script 到底是什么，我也说不清楚，我目前没有仔细去找解释这个 <strong><code>[[Scopes]][0]: Script</code></strong> 的文档，大致的找了下，并没有找到，还望有了解的大佬解释下这个 作用域链 顶端的 Script 到底是个什么东西。</p></li></ul><h2 id="干货总结" tabindex="-1"><a class="header-anchor" href="#干货总结" aria-hidden="true">#</a> 干货总结</h2><ul><li>let 和 const 也存在变量提升，预编译阶段提升，所以能绑定整个作用域</li><li>let 和 const 将变量提升到了一个称为 “死缓区” 的地方，尝试访问 “死缓区” 内容将会报错，所以形成 “暂时性死区”</li><li>let 和 const 在提升变量时不会对其初始化操作</li><li>let 和 cosnt 声明的全局变量在 作用域链的顶端，一个叫 Script 的作用域里，根据作用域链规则，可以访问到其定义的全局变量</li></ul></div><!--[--><!--]--></div><footer class="page-meta"><!----><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 18651805393@163.com">Zyunchao</span><!----><!--]--><!--]--></span></div></footer><!----><!--[--><!--]--></main><!--]--></div><!----><!--]--></div>
    <script type="module" src="/assets/app-bfaa94ab.js" defer></script>
  </body>
</html>
